<!DOCTYPE html>
<html>

<head>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>平台数据对比</title>
    <#include "/header.html">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chartStyle.css">
    <script src="${request.contextPath}/statics/js/echarts.min.js"></script>
    <script src="${request.contextPath}/statics/js/transData.js"></script>
</head>
<style>
    .bootstrap-select{
        width: 100% !important;
    }
    .glyphicon-arrow-up{
        color: red;
    }

    .glyphicon-arrow-down{
        color: #76d471;
    }
    #tableData{
        max-width: none;
        min-width: 100%;
    }
    #tableData tr td{
        min-width: 100px;
        max-width: 200px;
    }
</style>
<body>
<div id="index">
    <div class="layui-container" style="width: 100%;">
        <div class="layui-row" style="margin-top: 10px;">
            <div class="layui-col-md2 ">
                <div id="platform1">
                <select class="selectpicker" id="siteSelect" data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="取消全选" data-deselect-all-text="全选" title="请选择平台名称" multiple  style="width:100%;" >
                </select>
                </div>
                <div id="platform2">
                <select class="selectpicker" id="siteSelect3"  title="请选择平台名称"   style="width:100%;display: none" >

                </select>
                </div>
            </div>
            <div class="layui-col-md2" style="padding-left: 20px;">
                <input type="text" class="form-control" required  id="startTime"  placeholder="请输入对比日期"  autocomplete="off" >
            </div>
            <div class="layui-col-md1" style="width: 50px;text-align: center;line-height: 35px;cursor: pointer;">
                <span class="fa fa-exchange fa-2x" onclick="switchover()"></span>
            </div>
            <div class="layui-col-md2" >
                <input type="text" class="form-control" required  id="endTime"  placeholder="请输入对比日期"  autocomplete="off" >
            </div>
            <div class="layui-col-md2" style="padding-left: 20px;">
                <select class="selectpicker" data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="取消全选" data-deselect-all-text="全选" id="siteSelect2" title="请选择字段" multiple  style="width:100%;"></select>
            </div>
            <div class="layui-col-md3 " style="padding-left: 20px;">
                <div class="btn btn-default" id="search" onclick="reload()">对比</div>
                <div class="btn-group" role="group" id="horizon">
                    <div class="btn btn-default" id="search1" data-id="1">近一周</div>
                    <div class="btn btn-default" id="search2" data-id="2">近一月</div>
                </div>
                <#if shiro.hasPermission("data:behavior:exprot")>
                    <div class="btn btn-default" id="export">导出</div>
                </#if>
            </div>

            </div>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title" style="padding: 0 20px;">
                <li class="layui-this">表单数据</li>
                <li>柱状图数据</li>
                <li>折线图数据</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <!--<table id="bootstrap-table" data-mobile-responsive="true"></table>-->
                    <div style="width: 100%;overflow-x: auto">
                        <table id="tableData" class="table table-bordered table-hover"></table>
                    </div>
                  </div>
                <div class="layui-tab-item" id="bargraph">

                </div>
                <div class="layui-tab-item" >
                    <div class="row chartsBox" style="padding-top: 20px;" id="line">

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    $('#platform1').show();
    $('#platform2').hide()
    var tabindex = 0;
    var element = layui.element;
    element.on('tab(docDemoTabBrief)', function(data){
        // console.log(data.index)
        tabindex =data.index;
        if(data.index==0){
            $('#platform1').show();
            $('#platform2').hide()
        }
        if(data.index==1){
            var _html =''
            for(var i=0;i<$('#siteSelect').val().length;i++){
                _html = _html+'<div class="row" style="margin-top: 10px;">' +
                    '<div class="col-xs-12 col-md-12">' +
                    '<div id="bargraphs'+i+'" style="width: 100%;height: 700px;"></div>' +
                    '</div>' +
                    '</div>'
            }

            $('#bargraph').html(_html);
            reload()
            $('#platform1').show();
            $('#platform2').hide()
        }else if(data.index==2){
            $('#platform1').hide();
            $('#platform2').show()
            reload()
        }
    });
    //初始化时间
    $('#startTime').val(gettime(1)+' - '+gettime(1));
    $('#endTime').val(gettime(2)+' - '+gettime(2));
    function switchover(){
        var time = $('#startTime').val();
        $('#startTime').val($('#endTime').val())
        $('#endTime').val(time)
    }

    function toThousands(num) {
        var result = [ ], counter = 0;
        num = (num || 0).toString().split('');
        for (var i = num.length - 1; i >= 0; i--) {
            counter++;
            result.unshift(num[i]);
            if (!(counter % 3) && i != 0) { result.unshift(','); }
        }
        return result.join('');
    }

    function setbar(name,data,id){



        var array_title =[];
        var array_data1 = [];
        var array_data2 = [];
        for(var i=0;i<data.length;i++){
            array_title.push(data[i].param);
            array_data1.push(data[i].beforeValue);
            array_data2.push(data[i].afterValue);
        }

        var myChart = echarts.init(document.getElementById('bargraphs'+id));
        option = {
            title: {
                text: name
            },
            tooltip: {
                trigger: 'axis',
                formatter:function (params) {

                    var _html = '<span style="color: #FFFFFF">'+params[0].axisValueLabel+'</span><br />'+
                        '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[0].color+'"></span>'+params[0].seriesName+':'+toThousands(params[0].data)+'<br>'+
                        '<span style="padding-left: 25px;">VS</span><br>'+
                        '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[1].color+'"></span>'+params[1].seriesName+':'+toThousands(params[1].data)+'<br>'

                    return _html
                },
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['对比前', '对比后']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: array_title
            },
            color:['#2ec770','#1c97f5','#cccccc'],
            series: [
                {
                    name: '对比前',
                    type: 'bar',
                    data: array_data1
                },
                {
                    name: '对比后',
                    type: 'bar',
                    data: array_data2
                }
            ]
        };
        myChart.setOption(option,true);


    }
    var laydate = layui.laydate;
    laydate.render({
        elem: '#startTime',
        range: true,
        position: 'fixed',
        change:function(value, date, endDate){
            $('#horizon .btn').removeClass('active');
        }
    });
    laydate.render({
        elem: '#endTime',
        range: true,
        position: 'fixed',
        change:function(value, date, endDate){
            $('#horizon .btn').removeClass('active');
        }
    });

$(function(){
    $('#export').click(function(){
            // var data={
            //         "beforeStartDate":$('#startTime').val().split(' - ')[0]?$('#startTime').val().split(' - ')[0]:'',
            //         "beforeEndDate":$('#startTime').val().split(' - ')[1]?$('#startTime').val().split(' - ')[1]:'',
            //         "afterStartDate":$('#endTime').val().split(' - ')[0]?$('#endTime').val().split(' - ')[0]:'',
            //         "afterEndDate":$('#endTime').val().split(' - ')[1]?$('#endTime').val().split(' - ')[1]:'',
            //         "params":$('#siteSelect2').val(),
            //         "platformId":$('#siteSelect').val()?$('#siteSelect').val():''
            //     };
              //  console.log(baseURL +"platformcontrast/downloadBrokenLine?beforeStartDate="+data.beforeStartDate+"&beforeEndDate="+data.beforeEndDate+"&afterStartDate="+data.afterStartDate+"&afterEndDate="+data.afterEndDate+"&params="+$('#siteSelect2').val()+"&platformId="+$('#siteSelect').val())
        var data = setParams();
        if(tabindex==2){
            window.location.href=baseURL +"platformcontrast/downloadBrokenLine?beforeStartDate="+data.beforeStartDate+"&beforeEndDate="+data.beforeEndDate+"&afterStartDate="+data.afterStartDate+"&afterEndDate="+data.afterEndDate+"&params="+$('#siteSelect2').val()+"&platformId="+$('#siteSelect3').val()

        }else{
            window.location.href=baseURL +"platformcontrast/downloadBrokenContrast?beforeStartDate="+data.beforeStartDate+"&beforeEndDate="+data.beforeEndDate+"&afterStartDate="+data.afterStartDate+"&afterEndDate="+data.afterEndDate+"&params="+$('#siteSelect2').val()+"&platformId="+$('#siteSelect').val()
        }



    })
    $('#horizon .btn').each(function(index){
          $(this).click(function(){
              if($(this).attr('data-id')==1){
                  $('#startTime').val(gettime(6) +' - '+gettime(0))
                  $('#endTime').val(gettime(13) +' - '+gettime(7))
              }else{
                  $('#startTime').val(gettime(29) +' - '+gettime(0))
                  $('#endTime').val(gettime(59) +' - '+gettime(30))
              }
              $('#horizon .btn').removeClass('active');
              $(this).addClass('active');
              reload()
          })
    })
})
function gettime(num){
    var _thisdate =new Date() - (1000*60 *60 *24*num)
    var date = new Date(_thisdate);
    var seperator1 = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    return currentdate;
}

    $.ajax({
        type : "get",
        url : baseURL+"platform/findAllPlatform",
        dataType : "json",
        success: function(data) {
            if(data.code==0){
                var _html = ''
                var _arr =[]
                for(var i=0;i<data.platformList.length;i++){
                    _html = _html + '<option value="'+data.platformList[i].platformId+'">'+data.platformList[i].nickName+'</option>'
                    _arr.push(data.platformList[i].platformId)
                }
                $('#siteSelect').html(_html);
                $('#siteSelect').val(_arr)
                $('#siteSelect').selectpicker('refresh');
                $('#siteSelect3').html(_html);
                $('#siteSelect3').selectpicker('refresh');
                $.ajax({
                    type : "get",
                    url : baseURL+"platformcontrast/getPlatformContrastParam",
                    dataType : "json",
                    success: function(data) {
                        if(data.code==0){
                            var _html = '';
                            var selectedVal = [];
                            var userChoice = localStorage.getItem('platformItems');
                            for(var i=0;i<data.result.length;i++){
                                _html = _html + '<option value="'+data.result[i].dateKey+'">'+data.result[i].dataName+'</option>';
                                selectedVal.push(data.result[i].dateKey);
                            }
                            $('#siteSelect2').html(_html);
                            if(userChoice){
                                $('#siteSelect2').val(JSON.parse(userChoice));
                                $('#siteSelect2').selectpicker('refresh');
                            }else{
                                $('#siteSelect2').val(selectedVal);
                                $('#siteSelect2').selectpicker('refresh');
                            }
                            getTable()
                            // $('#bootstrap-table')
                            //     .bootstrapTable(
                            //         {
                            //             method : 'post', // 服务器数据的请求方式 get or post
                            //             url : baseURL + 'platformcontrast/findPlatformContrast', // 服务器数据的加载地址
                            //             showRefresh : true,
                            //             showToggle : true,
                            //             showColumns : true,
                            //             showExport :true,
                            //             exportOptions:{
                            //                 ignoreColumn: [],
                            //             },
                            //             sortable: true,
                            //             sortName:"dateStr",// 排序列名称
                            //             sortOrder: "desc",
                            //             iconSize : 'outline',
                            //             toolbar : '#exampleToolbar',
                            //             striped : true, // 设置为true会有隔行变色效果
                            //             dataType : "json", // 服务器返回的数据类型
                            //             pagination : false, // 设置为true会在底部显示分页条
                            //             // queryParamsType : "limit",
                            //             // //设置为limit则会发送符合RESTFull格式的参数
                            //             singleSelect : false, // 设置为true将禁止多选
                            //             // contentType : "application/x-www-form-urlencoded",
                            //             // //发送到服务器的数据编码类型
                            //             pageSize : 999, // 如果设置了分页，每页数据条数
                            //             pageNumber : 1, // 如果设置了分布，首页页码
                            //             // search : true, // 是否显示搜索框
                            //             //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                            //             sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                            //             // "server"
                            //             queryParams : function(params) {
                            //                 return {
                            //                     // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            //                     "beforeStartDate":$('#startTime').val().split(' - ')[0]?$('#startTime').val().split(' - ')[0]:'',
                            //                     "beforeEndDate":$('#startTime').val().split(' - ')[1]?$('#startTime').val().split(' - ')[1]:'',
                            //                     "afterStartDate":$('#endTime').val().split(' - ')[0]?$('#endTime').val().split(' - ')[0]:'',
                            //                     "afterEndDate":$('#endTime').val().split(' - ')[1]?$('#endTime').val().split(' - ')[1]:'',
                            //                     "params":$('#siteSelect2').val(),
                            //                     "platformId":$('#siteSelect').val()?$('#siteSelect').val():null
                            //
                            //                 };
                            //             },
                            //             onLoadSuccess:function(data){
                            //                 $("#search").attr("disabled",false);
                            //                 layer.close(indexloading);
                            //                 if(tabindex==1){
                            //                     setbar(data)
                            //                 }
                            //
                            //             },
                            //             // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                            //             // queryParamsType = 'limit' ,返回参数必须包含
                            //             // limit, offset, search, sort, order 否则, 需要包含:
                            //             // pageSize, pageNumber, searchText, sortName,
                            //             // sortOrder.
                            //             // 返回false将会终止请求
                            //             columns : [
                            //
                            //                 {
                            //                     field : 'param',
                            //                     align:'center',
                            //                     title : '类型名称'
                            //                 },
                            //
                            //                 {
                            //                     field : 'beforeValue',
                            //                     align:'center',
                            //                     title : '对比前',
                            //                     formatter : function(value, row,index) {
                            //                         return value?toThousands(value):0
                            //                     }
                            //                 },
                            //                 {
                            //                     field : 'afterValue',
                            //                     align:'center',
                            //                     title : '对比后',
                            //                     formatter : function(value, row,index) {
                            //                         return value?toThousands(value):0
                            //                     }
                            //                 },
                            //                 {
                            //                     field : 'riseOrFall',
                            //                     align:'center',
                            //                     title : '上升幅度',
                            //                     formatter : function(value, row,index) {
                            //                         //1上升 2是下降
                            //                         return value==1?('+'+row.valueRate+'%<span class="glyphicon glyphicon-arrow-up"></span>'):(row.valueRate+'%<span class="glyphicon glyphicon-arrow-down"></span>')
                            //                     }
                            //                 }]
                            //         });
                        }else{
                            layer.msg('数据获取失败');
                        }
                    },
                    error:function(){
                        statsData = false;
                        layer.msg('数据获取失败');
                    }
                });
            }else{
                layer.msg('数据获取失败');
            }
        },
        error:function(){
            statsData = false;
            layer.msg('数据获取失败');
        }
    });
    function setParams() {
        var _array = $('#siteSelect').val()||[];
        for(var i=0;i<_array.length;i++){
            _array[i] = parseInt(_array[i]);
        }
        var params = {
            "beforeStartDate":$('#startTime').val().split(' - ')[0]?$('#startTime').val().split(' - ')[0]:'',
            "beforeEndDate":$('#startTime').val().split(' - ')[1]?$('#startTime').val().split(' - ')[1]:'',
            "afterStartDate":$('#endTime').val().split(' - ')[0]?$('#endTime').val().split(' - ')[0]:'',
            "afterEndDate":$('#endTime').val().split(' - ')[1]?$('#endTime').val().split(' - ')[1]:'',
            "params":$('#siteSelect2').val(),
            "platformId":_array
        };
        localStorage.setItem("platformItems",JSON.stringify($('#siteSelect2').val()));
        if(params.beforeStartDate && params.beforeEndDate){
            var minBef;
            var maxBef;
            if(params.beforeStartDate>params.beforeEndDate){
                maxBef = params.beforeStartDate;
                minBef = params.beforeEndDate;
                params.beforeStartDate = minBef;
                params.beforeEndDate = maxBef;
            }
            if(params.afterStartDate && params.afterEndDate){
                var minAf;
                var maxAf;
                if(params.afterStartDate>params.afterEndDate){
                    maxAf = params.afterStartDate;
                    minAf = params.afterEndDate;
                    params.afterStartDate = minAf;
                    params.afterEndDate = maxAf;
                }
            }
        }
        return params;
    }
    function getTable(){
        var params = setParams();
        $("#search").attr("disabled",'disabled');
        indexloading = layer.load(2);
        var isSameDay = false;
        var befShow = false;
        var afterShow = false;
        var theDay = params.beforeStartDate;
        if((params.beforeStartDate == theDay) &&  (params.afterEndDate == theDay) && (params.afterStartDate == theDay) && (params.afterEndDate == theDay)){
            isSameDay = true;
        }
        if(!$('#startTime').val()){
            befShow = true;
        }else if(!$('#endTime').val()){
            afterShow = true;
        }
       // console.log(isSameDay);
        $.ajax({
            type: "post",
            url: baseURL + "platformcontrast/findPlatformContrast",
            dataType: "json",
            contentType : "application/json",
            data:JSON.stringify(params),
            success: function (data) {
                $("#search").attr("disabled",false);
                layer.close(indexloading);
                if(tabindex==1){
                    var _index = 0;
                    for(var item in data.result){
                        setbar(item,data.result[item],_index)
                        _index++;
                    }
                }
                applyTable(data.result,isSameDay,befShow,afterShow)
           },
            error:function(){
                layer.close(indexloading);
                applyTable(data.result);
            }
        })
    }
    function applyTable(data,isSameDay,befShow,afterShow){
        //console.log(befShow,afterShow)
        var _list;
        var platformName=[];
        var _html ='<tr><td>字段</td>';
        for(var item in data){
            _list = [];
            for(var i=0;i<data[item].length;i++){
                _list.push(data[item][i])
            }
            _html = _html +'<td>'+item+'</td>'
            platformName.push(item);
        }
        _html = _html +'</tr>'

        for(var i=0;i<_list.length;i++){
            //console.log(_list[i]);
            if(_list[i].paramDesc){
                _html = _html +'<tr><td><strong data-toggle="tooltip" data-placement="top" title="'+_list[i].paramDesc+'">'+_list[i].param+'</strong></td>';
            }else{
                _html = _html +'<tr><td>'+_list[i].param+'</td>';
            }
             for(var item in data){
                for(var k=0;k<data[item].length;k++){
                    if(data[item][k].param==_list[i].param){
                        var _riseOrFall=(data[item][k].riseOrFall==1?(data[item][k].valueRate+'%<span class="glyphicon glyphicon-arrow-up"></span>'):(data[item][k].valueRate+'%<span class="glyphicon glyphicon-arrow-down"></span>'))
                       if(!isSameDay){
                           if(befShow && !afterShow){
                                _html = _html +'<td>'+data[item][k].afterValue+'</td>';
                            }else if(!befShow && afterShow){
                                _html = _html +'<td>'+data[item][k].beforeValue+'</td>';
                            }else{
                               _html = _html +'<td>'+data[item][k].beforeValue + '   '+data[item][k].afterValue+'   '+_riseOrFall+'</td>';
                           }
                        }else{
                           _html = _html +'<td>'+data[item][k].beforeValue+'</td>';
                       }
                  }
                }
            }
            _html = _html +'</tr>'
        }
        $('#tableData').html(_html);
        $('[data-toggle="tooltip"]').tooltip();
    }
    function reload() {
        if(($('#startTime').val()==''&&$('#endTime').val()=='')){
            layer.msg('时间格式不对')
            return;
        }
        $("#search").attr("disabled",'disabled');
        var obj_data = {
            "beforeStartDate":$('#startTime').val().split(' - ')[0]?$('#startTime').val().split(' - ')[0]:'',
            "beforeEndDate":$('#startTime').val().split(' - ')[1]?$('#startTime').val().split(' - ')[1]:'',
            "afterStartDate":$('#endTime').val().split(' - ')[0]?$('#endTime').val().split(' - ')[0]:'',
            "afterEndDate":$('#endTime').val().split(' - ')[1]?$('#endTime').val().split(' - ')[1]:'',
            "params":$('#siteSelect2').val(),
            "platformId":$('#siteSelect3').val()?$('#siteSelect3').val():null
        }

        if(tabindex!=2){
            indexloading = layer.load(2);
            // var opt = {
            //     url: baseURL + 'platformcontrast/findPlatformContrast',
            //     silent: true,
            //     query:obj_data
            // };
            // $('#bootstrap-table').bootstrapTable('refresh',opt);
            getTable()
        }else if(tabindex==2){
            getline(obj_data)
        }
    }
var indexloading;
var indexloading2;
function getline(e){
    indexloading2 = layer.load(2);
    $.ajax({
        type: "post",
        url: baseURL + "platformcontrast/findPlatformBrokenLine",
        data:JSON.stringify(e),
        contentType:"application/json",
        success: function (data) {
            $("#search").attr("disabled",false);
            if(data.code==0){
                var _html = '';
                for(var i = 0;i<data.result.brokenLine.length;i++){
                    _html = _html +  '<div class="col-md-6 chartCon">' +
                        '            <div class="chartStyle" id="chart'+i+'"></div>' +
                        '            <div class="chartText">' +
                        '                <b class="tipLogo green" data-toggle="tooltip" data-original-title="对比前总数'+data.result.brokenLine[i].todayNum+'" data-placement="bottom" >前</b>' +
                        '                <span class="valColor green">'+transData(data.result.brokenLine[i].todayNum)+'</span>' +
                        '                <b class="tipLogo blue" data-toggle="tooltip" data-original-title="对比后总数'+data.result.brokenLine[i].yesterdayNum+'" data-placement="bottom" >后</b>' +
                        '                <span class="valColor blue">'+transData(data.result.brokenLine[i].yesterdayNum)+'</span>' +
                        '                <b class="tipLogo wathet" data-toggle="tooltip" data-original-title="比例'+(data.result.brokenLine[i].riseOrFall==1?'+':'-')+data.result.brokenLine[i].propor+'%" data-placement="bottom" >比</b>' +
                        '                <span class="valColor  wathet">'+(data.result.brokenLine[i].riseOrFall==1?'+':'-')+data.result.brokenLine[i].propor+'%</span>' +
                        '            </div>' +
                        '        </div>'
                };
                $('#line').html(_html)
                $('[data-toggle="tooltip"]').tooltip({
                    html:true
                });
                for(var i = 0;i<data.result.brokenLine.length;i++){
                    commonOption('chart'+i,data.result.brokenLine[i],data.result.xaxis,data.result.dateItem);
                }

            }
            layer.close(indexloading2);
        }
    })
}
function commonOption(id,seriesData,xaxis,dateItem){
        var xaxiss = [];
        var xlene = 1
        if(seriesData.todayCount.length>=seriesData.yesterdayCount.length){
            xlene=2;
        }
        for(var i=0;i<xaxis.length;i++){
            if(xlene==2){
                xaxiss.push(xaxis[i]+(dateItem[i]?' VS '+dateItem[i]:''))
            }else{
                if(dateItem[i]){
                    xaxiss.push((dateItem[i]+' VS '+xaxis[i]))
                }else{
                    xaxiss.push(xaxis[i])
                }
            }
        }
        var myChart = echarts.init(document.getElementById(id));
        var option = {
            title: {
                text: seriesData.lineName
            },
            tooltip: {
                trigger: 'axis',
                formatter:function (params) {
                    var data;
                    // console.log(params,dateItem,'sssss')
                    // var html = '<span style="color: #FFFFFF">'+params[0].axisValueLabel+'</span><br />';
                    var html =""
                    var perHtml = '';
                    if(params.length > 1){
                        data = calPercent(params[1].value,params[0].value);
                        if(data.perType == 1){
                            perHtml = '<i class="fa fa-long-arrow-up" style="color: red;margin-right: 3px"></i><span style="color: red;">'+data.percent+'</span>';
                        }else if(data.perType == 2){
                            perHtml = '<i class="fa fa-long-arrow-down" style="color: #2ec770;margin-right: 3px"></i><span style="color: #2ec770;">'+data.percent+'</span>';
                        }
                        html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color + '"></span>' + (xlene==1?dateItem[params[0].dataIndex]:xaxis[params[0].dataIndex]) + '：' + addSplit(params[0].value) + '<br/>';
                        html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[1].color + '"></span>' + (xlene==1?xaxis[params[1].dataIndex]:dateItem[params[1].dataIndex]) + '：' + addSplit(params[1].value) + '&nbsp;&nbsp;&nbsp;'+ perHtml;
                    }else{
                        html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color + '"></span>' + xaxis[params[0].dataIndex] + '：' + addSplit(params[0].value) + '<br/>';
                    }
                    return html;
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985',
                        formatter:function (params) {
                            return parseFloat(params.value).toFixed(0)
                        }
                    }
                }
            },
            color:['#2ec770','#1c97f5'],
            legend: {
                data:['前','后'],
                left: '50%'
            },
            grid: {
                left: '40px',
                right: '4%',
                top:'90px',
                bottom:'3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                name:'时间',
                nameLocation:'start',
                axisLabel: {
                    showMaxLabel: true
                },
                axisPointer:{
                    label:{
                        formatter:function (params) {
                            // console.log(params,'ss');
                            var val  = params.value;
                            return params.value;
                        }
                    }
                },
                data:xaxiss
            },
            yAxis: {
                type: 'value',
                name:'数量'
            },
            series: [
                {
                    name:'前',
                    type:'line',
                    lineStyle:{
                        color:'#2ec770'
                    },
                    smooth: true,
                    data:seriesData.todayCount
                },
                {
                    name:'后',
                    type:'line',
                    areaStyle: {},
                    lineStyle:{
                        color:'#1c97f5'
                    },
                    smooth: true,
                    data:seriesData.yesterdayCount
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option,true);

    }
</script>
<style>
    .chartText b.green{
        background-color:#2ec770;
    }
    .chartText span.green{
        color:#2ec770;
    }
    .chartText b.blue{
        background-color:#1c97f5;
    }
    .chartText span.blue{
        color:#1c97f5;
    }
    .chartText b.red{
        background-color: red;
    }
    .chartText span.red{
        color: red;
    }
    .chartText b.wathet{
        background-color: #62a6f5;
    }
    .chartText span.wathet{
        color: #62a6f5;
    }
</style>
</body>

</html>